import React from 'react';
import {connect} from 'dva';
import {Form, Row, Col, DatePicker, Table, Pagination, Input, Button, Select} from 'antd';

const dateFormat = "YYYY-MM-DD";
const {RangePicker} = DatePicker;
const FormItem = Form.Item;
const R = require("ramda");

const customerReport = Form.create()(class CustomerReport extends React.Component {
    constructor(props) {
        super(props);
    }

    columns = [
        {title: "代理合同协议号", dataIndex: 'agencyno', key: 'agencyno'},
        {title: "公司名称", dataIndex: 'companyname', key: 'companyname'},
        {title: "创建者", dataIndex: 'creator', key: 'creator'},
        {title: "客户类型", dataIndex: 'cstType', key: 'cstType'},
        {title: "保证金标准（%）", dataIndex: 'foreignexratio', key: 'foreignexratio'},
        {
            title: "代理费标准", dataIndex: 'agencyfee', key: 'agencyfee', render(text, record, index) {
                return (R.isNil(record.agencyfee) ? "" : <p>1美金收{record.agencyfee}分</p>)
            }
        },
        {title: "业务经理", dataIndex: 'manager', key: 'manager'},
        {title: "签约日期", dataIndex: 'signdate', key: 'signdate'},
        {title: "审核状态", dataIndex: 'status', key: 'status'},
        {title: "跟单经理", dataIndex: 'waiter', key: 'waiter'},
        {title: "创建时间", dataIndex: 'createtime', key: 'createtime'},
    ];


    handleSearch = () => {
        let values = this.props.form.getFieldsValue();
        let times = values.timeRange;
        let status = values.status;

        this.props.dispatch({
            type: "customerReport/getCustomerList",
            payload: {
                beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                status: R.isNil(status) ? null : status,

            }
        })

    }

    handleExport = () => {
        let values = this.props.form.getFieldsValue();
        let times = values.timeRange;
        let status = values.status;
        this.props.dispatch({
            type: "customerReport/exportCustomerList",
            payload: {
                beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                status: R.isNil(status) ? null : status,
            }
        })
    }


    render() {

        let pagination = {

            showTotal: total => `共 ${total} 条数据`,
            pageSize: this.props.customerReport.page.size,
            total: this.props.customerReport.page.totalRow,
            showSizeChanger: true,
            current: this.props.customerReport.page.page,
            onShowSizeChange: (current, size) => {
                let values = this.props.form.getFieldsValue();
                let status = values.status;
                let times = values.timeRange;

                let newPage = this.props.customerReport.page;
                newPage.size = size;
                newPage.page = 1;
                this.props.dispatch({
                    type: 'customerReport/getCustomerList',
                    payload: {
                        beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                        endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                        status: R.isNil(status) ? null : status,
                        page: newPage,
                    }
                });
            },
            onChange: (pageNumber, pageSize) => {
                let values = this.props.form.getFieldsValue();
                let times = values.timeRange;
                let newPage = this.props.customerReport.page;
                newPage.page = pageNumber;
                let status = values.status;
                newPage.pageSize = pageSize;
                this.props.dispatch({
                    type: 'customerReport/getCustomerList',
                    payload: {
                        beginTime: R.isNil(times) || R.isEmpty(times) ? null : times[0].format(dateFormat),
                        endTime: R.isNil(times) || R.isEmpty(times) ? null : times[1].format(dateFormat),
                        status: R.isNil(status) ? null : status,
                        page: newPage,
                    }
                });
            }


        };
        let dataSource = R.isNil(this.props.customerReport.cstList) ? null : this.props.customerReport.cstList;
        const {getFieldDecorator} = this.props.form;
        let formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 18}};
        return (
            <Form>
                <Row>
                    <Col span={3}>
                        <FormItem {...formItemLayout} span={6} label="状态">
                            {getFieldDecorator("status", {})(
                                <Select style={{width: 120}}>
                                    <option value={null}>（空）</option>
                                    <option value="1">草稿</option>
                                    <option value="2">待审核</option>
                                    <option value="3">待补充资料</option>
                                    <option value="4">审核成功</option>
                                    <option value="5">审核失败</option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={6}>
                        <FormItem span={6} {...formItemLayout} label="创建时间">
                            {getFieldDecorator("timeRange", {
                                initialValue: null,
                            })(
                                <RangePicker
                                    style={{width: 230}}
                                    showTime={{format: 'YYYY-MM-DD'}}
                                    format="YYYY-MM-DD"
                                    placeholder={['开始时间', '结束时间']}
                                />
                            )
                            }
                        </FormItem>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" icon="search" style={{marginLeft: 10}}
                                onClick={this.handleSearch.bind(this)}>查询</Button>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" onClick={this.handleExport.bind(this)}>导出数据</Button>
                    </Col>
                </Row>
                <Row>
                    <Table dataSource={dataSource} pagination={pagination} loading={this.props.loading} size={'middle'} columns={this.columns} bordered={true}/>
                </Row>

            </Form>
        )
    }

})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.customerReport, customerReport: state.customerReport
    };
}

export default connect(mapStateToProps)(customerReport);

